<script lang="ts" setup>
  import { ref } from "vue"
  import gmDialog from '@/components/Dialog/index.vue'
  import { cloneDeep } from "lodash-es"
  import { saveOrUpdateCompany } from '@/api/company'
  import { type FormInstance, type FormRules } from "element-plus"
  import useForm from '@/hooks/useForm'
  import AreaSelect from '@/components/AreaSelect/index.vue'

  interface Props {
    data?: any
  }

  const props = withDefaults(defineProps<Props>(), {
    data: ()=>({}),
  })

  const form = ref<any>(cloneDeep(props.data) || {})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDialog>>()
  const emit = defineEmits(['cancel','success'])


  const rules: FormRules = {
    name: [
      { required: true, message: '请输入公司名称', trigger: 'change' },
    ],
    taxId: [
      { required: false, message: '请输入税号', trigger: 'change' },
    ],
    address: [
      { required: false, message: '请输入注册地址', trigger: 'change' },
    ],
    mobile: [
      { required: false, message: '请输入电话号码', trigger: 'change' },
    ],
    openBank: [
      { required: false, message: '请输入开户银行', trigger: 'change' },
    ],
    bankAccount: [
      { required: false, message: '请输入银行账号', trigger: 'change' },
    ],
  }

  const changeArea = (e)=> {
    form.value.province = e.province.name
    // form.value.provinceCode = e.province.code
    form.value.city = e.city.name
    // form.value.cityCode = e.city.code
    form.value.area = e.street.name
    // form.value.areaCode = e.street.code
  }

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})

  const cancel = ()=>{
    emit('cancel')
  }

  const success = ()=>{
    handleSubmit(saveOrUpdateCompany, formRef.value, form.value, dialogRef.value)
  }
</script>

<template>
  <gm-dialog
    ref="dialogRef"
    title="新增/编辑公司"
    @cancel="cancel"
    @comfirm="success">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item  prop="name" label="公司名称">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="mobile" label="电话号码">
        <el-input v-model="form.mobile" placeholder="请输入电话号码" />
      </el-form-item>
      <el-form-item prop="taxId" label="税号">
        <el-input v-model="form.taxId" placeholder="请输入税号" />
      </el-form-item>
      <el-form-item prop="openBank" label="开户银行">
        <el-input v-model="form.openBank" placeholder="请输入开户银行" />
      </el-form-item>
      <el-form-item prop="bankAccount" label="银行账号">
        <el-input v-model="form.bankAccount" placeholder="请输入银行账号" />
      </el-form-item>
      <el-form-item  prop="cityCode" label="省市区">
        <AreaSelect width="100%" v-model="form.allAreaCode" :modelValue="form.allAreaCode" @change="changeArea"/>
      </el-form-item>
      <el-form-item prop="address" label="注册地址">
        <el-input v-model="form.address" placeholder="请输入注册地址" />
      </el-form-item>
     
    </el-form>
  </gm-dialog>
</template>

<style lang="scss" scoped>
</style>
